<template>
	<div class="user-center">
		<div class="content">
			<div class="avatar" @click="setShowCat"><Avatar :src="userInfo.avatar ? userInfo.avatar : 'https://cdn.jy520.fun/superbed/2020/09/17/5f631486160a154a67ceecda.jpg'" size="100" /></div>
			<h1 class="user-title">
				<a href="#">{{ userInfo.userName ? userInfo.userName : '南风怡人' }}</a>
			</h1>
			<p class="remark">{{ userInfo.remark ? userInfo.remark : '南城起风 风醉怡人' }}</p>
			<div class="type" v-show="!userInfo.userName">
				<a class="logo logo-github" href="https://gitee.com/langzh" target="_blank"></a>
				<a class="logo logo-qq" href="http://wpa.qq.com/msgrd?v=3&uin=1102076808&site=qq&menu=yes" target="_blank"></a>
				<Poptip trigger="hover" placement="top">
					<div class="logo logo-wechat"></div>
					<div slot="content"><img src="https://cdn.jy520.fun/superbed/2020/11/28/5fc1ec8115e7719084a77850.jpg" width="100px" /></div>
				</Poptip>
				<a class="logo logo-weibo" href="https://www.weibo.com/5555892363" target="_blank"></a>
			</div>
			<div class="list" >
				<YRList :list="list"></YRList>
				<div class="search">
					<input v-model="kw" placeholder="搜索" v-on:keyup.enter="search()" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters,mapMutations  } from 'vuex';
import YRList from '@/components/common/YRList.vue';
export default {
	name: 'UserCenter',
	components: {
		YRList
	},
	props: {},
	computed: {
		...mapGetters({
			userInfo: 'user/userInfo'
		})
	},
	data: () => {
		return {
			kw:undefined,
			list: [
				{
					name: '技术博客',
					url: `/article/articleList`
				},
				{
					name: '笑忘书集',
					url: '/novel/novelList'
				},
				{
					name: '温其如玉',
					url: '/poetry/poetryList'
				}
			]
		};
	},
	methods:{
		...mapMutations({
			setShowCat: 'base/setShowCat'
		}),
		search(){
			let href = window.location.href;
			let url = `/article/articleList`;
			if(href.indexOf(`/novel/novelList`)!=-1){
				url = `/novel/novelList`;
			}
			if(href.indexOf(`/poetry/poetryList`)!=-1){
				url = `/poetry/poetryList`;
			}
			this.$router.push({ path: url, query: { kw: this.kw } });
			this.kw = undefined;
		}
	}
};
</script>

<style lang="stylus" scoped>
.ivu-poptip-popper, .ivu-poptip-body-content
	min-width none !important
.user-center
	height 100%
	.content:hover .user-title::after
		transform scaleX(0)
	.content:hover .avatar
		opacity 1
	.content
		min-height 50px
		width 100%
		background #fff
		border-radius 10px
		position relative
		z-index 88
		text-align center
		padding-top 10px
		box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
		overflow auto
		.avatar
			height 110px
			display flex
			justify-content center
			align-items center
			opacity 0.8
			cursor pointer
			.ivu-avatar
				transition all 0.2s ease-in
			.ivu-avatar:hover
				box-shadow 0 0 0 2px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
		.user-title
			font-size 20px
			margin 0 10%
			position relative
			text-align center
			a
				color rgba(0, 0, 0, 0.8)
				font-weight 400
		.user-title::after
			content ''
			position absolute
			bottom -5px
			left 0
			transform scaleX(1)
			height 1px
			width 100%
			background rgba(0, 0, 0, 0.4)
			-moz-transition all 0.2s ease-in
			-webkit-transition all 0.2s ease-in
			-o-transition all 0.2s ease-in
			-ms-transition all 0.2s ease-in
			transition all 0.2s ease-in
		.remark
			padding 10px 0
			white-space nowrap
			text-overflow ellipsis
			overflow hidden
		.type
			padding 0  10px 10px
			display flex
			justify-content space-around
			.logo
				height 25px
				width 25px
				cursor pointer
				background-repeat no-repeat
				background-size cover
				background-size 100% 100%
				opacity 0.4
			.logo-qq
				background-image url('../../common/img/user_center/qq.png')
			.logo-wechat
				background-image url('../../common/img/user_center/wechat.png')
			.logo-weibo
				background-image url('../../common/img/user_center/weibo.png')
			.logo-github
				background-image url('../../common/img/user_center/gitee.png')
			.logo-qq:hover
				background-image url('../../common/img/user_center/qq_cur.png') !important
			.logo-wechat:hover
				background-image url('../../common/img/user_center/wechat_cur.png') !important
			.logo-weibo:hover
				background-image url('../../common/img/user_center/weibo_cur.png') !important
			.logo-github:hover
				background-image url('../../common/img/user_center/gitee_cur.png') !important

.list
	.search
		
		input
			background-color #ebebeb
			text-align: center;
			font-size: 1rem;
			color: #666;
			height 38px
			border none
			border-top 1px solid #eee
			width 100%
			outline:none;
		input:focus
			border-top 1px solid #dadada
</style>
